<template>  
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">车位使用管理</b> 用于管理小区里每一个停车位的使用情况</p>
    <el-card class="box-card" style="margin-bottom: 20px;">
      <el-form label-width="80px" :inline="true" label-position="top">
        <el-form-item label="小区名称" style="width: 240px;">
          <el-select placeholder="请选择" v-model="queryData.community_code">
            <el-option v-for="item in CommunityAllList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位名称" style="width: 240px;">
          <el-input placeholder="请选择" v-model="queryData.pk_code"></el-input>
        </el-form-item>
        <el-form-item label="车辆牌照" style="width: 240px;">
          <el-input placeholder="请选择" v-model="queryData.license_plate"></el-input>
        </el-form-item>
        <el-form-item label="车主姓名" style="width: 240px;">
          <el-input placeholder="请选择" v-model="queryData.owner"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 30px;">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button style="margin-right: 10px;" @click="onReset">重置</el-button>
          <el-button type="text" style="color: #409eff; size: 16px;" v-if="!isShow" @click="isShow = !isShow">展开<el-icon>
              <ArrowDown />
            </el-icon></el-button>
          <el-button type="text" style="color: #409eff; size: 16px;" v-else @click="isShow = !isShow">收起<el-icon>
              <ArrowUp />
            </el-icon></el-button>
        </el-form-item>

        <el-form-item label="联系方式" v-if="isShow">
          <el-input placeholder="请选择" v-model="queryData.tel"></el-input>
        </el-form-item>

        <el-form-item label="使用性质" v-if="isShow">
          <el-select placeholder="请选择" v-model="queryData.type">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" v-if="isShow">
          <DataSelect v-model="queryData.update_time" ref="datePick"></DataSelect>
        </el-form-item>

      </el-form>
    </el-card>
    <!-- 工具区域 -->
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" style="margin-right: 5px;" @click="addRef.isShow = true">添加信息</el-button>
          <el-icon style="margin-right: 5px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-right: 5px;">
            <Share />
          </el-icon>
          <el-icon>
            <Tools />
          </el-icon>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table :data="list" border style="width: 100%;">
        <el-table-column prop="id" label="ID" width="40" />
        <el-table-column prop="community.name" label="小区名称" />
        <el-table-column prop="parking_space.name" label="车位名称" />
        <el-table-column prop="license_plate" label="车辆牌照" />
        <el-table-column prop="owner" label="车主姓名" />
        <el-table-column prop="tel" label="联系方式" />
        <el-table-column prop="type" label="使用性质">
          <template #default="{ row }">
            {{ row.type == 1 ? '售' : '租' }}
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="总费用" width="66" />
        <el-table-column prop="begin_time" label="开始时间">
          <template #default="{ row }">
            {{ formatTimeAll(row.begin_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="end_time" label="截止时间">
          <template #default="{ row }">
            {{ formatTimeAll(row.end_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatTimeAll(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" plain size="small" @click="editRow(row.id)">编辑</el-button>
            <el-button type="text" plain size="small" @click="delRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize" layout="total, prev, pager, next"
        :total="total" background>
      </el-pagination>
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
    <p class="foot">Element UI黑马前端合肥前端欢迎您
    <p>@2023 地表最强集团</p>
    </p>
  </div>
</template>

<script setup name="Index">

import DataSelect from '@/components/Select/index.vue'
import { useCommunityAllList, formatTimeAll } from '@/hooks/hooks'
import { onMounted, reactive, ref } from 'vue';
import { getUsage, delCar } from '@/api/parking/user.js'
import addForm from "./addForm";
import { ElMessage } from 'element-plus';
const addRef = ref();
const datePick = ref()

// // 小区名称
const CommunityAllList = useCommunityAllList()

// ---------------列表功能-------------
const queryData = reactive({
  current: 1,
  pageSize: 5,
  create_time: '',
  community_code: '',
  parking_space: '',
  license_plate: '',
  remark: '',
  type: '',
  create_time: '',
  update_time: '',
  pk_code: '',
  owner: '',
  tel: ''
})
let isShow = ref(false)
const total = ref(0)
const list = ref([])
const initData = async () => {
  let { data } = await getUsage(queryData)
  console.log(data);
  list.value = data.rows
  total.value = data.count
}
onMounted(() => {
  initData()
})

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// 搜索确定
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 5,
    create_time: '',
    community_code: '',
    parking_space: '',
    license_plate: '',
    remark: '',
    type: '',
    create_time: '',
    update_time: '',
    pk_code: '',
    owner: '',
    tel: ''
  });
  datePick.value.time = []
  initData();
};
const options = [
  {
    value: '0',
    label: '租',
  },
  {
    value: '1',
    label: '售',
  }
]


// 修改功能
const editRow = (id) => {
  addRef.value.replyData(id);
};

// 删除功能
const delRow = async (id) => {
  let res = await delCar(id);
  console.log(res);
  ElMessage.success(res.msg);
  initData();
};

</script>
      
<style scoped>
.header {
  position: absolute;
  top: 15px;
  left: 80px;
  display: flex;
  align-items: center;
}

.tille {
  font-weight: 700;
  font-size: 20px;
}

.foot {
  text-align: center;
  font-size: 14px;
}
</style>